<template>
  <div>
    <el-dialog
      :model-value="open"
      :close-on-click-modal="false"
      :title="title"
      :before-close="handleClose"
      append-to-body
    >
      <el-form
        ref="setFormRef"
        :model="setForm"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="轨迹编码" prop="trajectoryCode" :label-position="labelPosition">
              <el-input
                v-model="setForm.trajectoryCode"
                placeholder="请输入轨迹编码"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轨迹中文名" prop="trajectoryName" :label-position="labelPosition">
              <el-input
                v-model="setForm.trajectoryName"
                placeholder="请输入轨迹中文名"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="轨迹英文名" prop="trajectoryNameEn" :label-position="labelPosition">
              <el-input
                v-model="setForm.trajectoryNameEn"
                placeholder="请输入轨迹英文名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status" :label-position="labelPosition">
              <el-select
                v-model="setForm.status"
                filterable
                placeholder="请选择状态"
                clearable
              >
                <el-option
                  v-for="dict in dicts[DictDirection.系统显示隐藏]"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="轨迹类型" prop="trajectoryType" :label-position="labelPosition">
              <el-select
                v-model="setForm.trajectoryType"
                placeholder="请选择轨迹类型"
                clearable
              >
                <el-option
                  v-for="dict in dicts[DictDirection.轨迹类型]"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div>
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, watch, defineExpose } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { addTrajectory, editTrajectory, getTrajectoryDetail } from '@/api/basicConfig/trackMaintenance'
import useDicts, { DictDirection } from '@/store/modules/dicts'

const dicts = useDicts()
dicts.setDicts(DictDirection.系统显示隐藏)
dicts.setDicts(DictDirection.轨迹类型)
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  open: {
    type: Boolean,
  },
})
let 
  setForm = ref({
    id: undefined,
    trajectoryCode: undefined,
    trajectoryName: undefined,
    trajectoryNameEn: undefined,
    status: undefined,
    trajectoryType: undefined,
  }),
  rules = ref({
    trajectoryCode: [{ required: true, message: '必填', trigger: 'blur' }],
    trajectoryName: [{ required: true, message: '必填', trigger: 'blur' }],
    trajectoryNameEn: [{ required: true, message: '必填', trigger: 'blur' }],
    status: [{ required: true, message: '必填', trigger: 'blur' }],
    trajectoryType: [{ required: true, message: '必填', trigger: 'blur' }],
  }),
  labelPosition = ref('right'),
  setFormRef = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $resetForm, $validateForm },
      },
    },
  } = getCurrentInstance()
const emit = defineEmits(['changeList', 'update:open'])

const reset = () => {
  setForm.value = {
    id: undefined,
    trajectoryCode: undefined,
    trajectoryName: undefined,
    trajectoryNameEn: undefined,
    status: undefined,
    trajectoryType: undefined,
  }
  $resetForm(setFormRef.value)
}
const submit = () => {
  $validateForm(setFormRef.value, async () => {
    let res = null
    if (props.title.includes('修改')) {
      res = await editTrajectory(setForm.value)
    } else {
      res = await addTrajectory(setForm.value)
    }
    if (res.code == 200) {
      ElMessage.success(`${ props.title }成功`)
      emit('update:open', false)
    } else {
      ElMessage.error(`${ props.title }失败`)
    }
  })
}
const cancel = () => {
  reset()
  emit('update:open', false)
}
const getDetail = (id) => {
  getTrajectoryDetail(id).then((res) => {
    if (res.code == 200) {
      setForm.value = res.data
    }
  })
}
const handleClose = () => {
  reset()
  emit('update:open', false)
}
defineExpose({
  getDetail,
})
</script>
l
